<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <input type="text" placeholder="输入关键词">
    <input type="password" placeholder="输入密码">
    <h3></h3>
    <h4></h4>
</body>

</html>
<script>
    function listenObj(obj) {
        for (var key in obj) {
            if (typeof obj[key] == 'object') {//如果某个属性是引用类型则递归遍历该属性
                listenObj(obj[key])//递归遍历该属性
            } else {//不是引用类型
                Object.defineProperty(obj, key, {
                    set: (newValue) => {
                        if (currentkey == 'phone') {
                            //重新给h3渲染新的内容
                            var h3 = document.querySelector('h3')
                            h3.innerHTML = newValue
                        } else {
                            //重新给h4渲染新的内容
                            var h4 = document.querySelector('h4')
                            h4.innerHTML = newValue

                        }
                    },
                    get: () => { console.log('获取了'); }
                })
            }

        }
    }
    var currentkey = ''
    var o = { phone: '', pass: '' }
    listenObj(o)
    //每当输入框中输入的内容方式改变就会自动执行
    document.querySelector("input[type='text']").oninput=function handleInput(e){
        currentkey = 'pass'
        o.pass = e.target.value
    }

</script>